<!--
 * @Author: 陈永浩(cyh1231wp@163.com)
 * @Date: 2020-11-04 16:15:43
 * @LastEditors: 陈永浩(cyh1231wp@163.com)
 * @LastEditTime: 2021-02-23 15:57:43
-->
<template>
  <div class="layout flex">
    <aside class="sidebar">
      <nav-bar></nav-bar>
    </aside>
    <Layout style="width: calc(100% - 60px);">
      <Header class="header" :style="{ background: '#fff' }">
        <top-bar />
      </Header>
      <Content>
        <div class="container">
          <router-view />
        </div>
      </Content>
    </Layout>
  </div>
</template>
<script>
import NavBar from "./components/NavBar";
import TopBar from "./components/TopBar";
export default {
  components: { NavBar, TopBar },
  data() {
    return {
      pageTitle: "",
      fullYear: new Date().getFullYear(),
    };
  },
  computed: {},
  methods: {
    logout() {},
  },
};
</script>
<style lang="scss" scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.layout-header-bar {
  background: #fff;
}

.sidebar {
  width: 60px;
  // flex: 0 0 200px;
  /*position: fixed;*/
  height: 100%;
  left: 0;
  top: 0;
  overflow: auto;
}

.without-second-sidebar {
  width: 60px;
}

.header {
  border-bottom: 1px solid #e5e5e5;
  height: 50px;
}

.container {
  min-height: calc(100vh - 50px - 29px);
  background-color: #ffffff;
  margin: 16px;
  padding: 16px;
}

.footer {
  background-color: #fff;
  height: 32px;
}
</style>